<form >
  <input type="text" name="contactName1" [(ngModel)]="curcontact.name1"  (change)="log()"/>
  <input type="text" name="contactName2" [ngModel]="curcontact.name2" />
</form>
<h3>
  表单2
</h3>
<form #form2="ngForm">
  <ul>
    <li>
      <label for="contactName3">姓名</label>
      <input type="text" name="contactName4" [(ngModel)]="curcontact.name3" />
    </li>
    <li>
      <label for="contactName4">姓名</label>
      <input type="text" name="contactName5" [(ngModel)]="curcontact.name4" />
    </li>
    <button (click)="log(form2)">打印form2</button>
  </ul>
</form>
<div>
  <button (click)="log()">打印</button>  
</div>

<h4>
  ngSubmit
</h4>
<form #form3="ngForm" (ngSubmit)="doSubmit(form3.value)">
  <input type="text" name="form31" [(ngModel)]="form3Obj.name">
  <button type="submit">提交</button>
  <button type="reset">重置</button>
</form>

<h3>
  自定义表单样式
</h3>
<form >
  <input type="text" minlength="3" maxlength="10" [ngModel]="form3Obj.name" name="form32" #form32="ngModel" required>
  <p [hidden]="form32.valid||form32.pristine">长度为3-10位</p>
</form>

<h2>
  自定义校验使用
</h2>
<form [formGroup]="formValidate">
  <input type="text" formControlName="phone" name='phone1' required />
  <!-- <p *ngIf="phone.errors">{{phone.errors.errorMsg}}这里暂时单独引入phone会报错，可以从formValidate级级引入</p> -->
  <button type="button" (click)="log(phone)">测试</button>
</form>
<h2>自定义管道</h2>
<form action="">
  <input type="text" id="pipeTest" [(ngModel)]="form5.name" name="phone2">
  <p>{{form5.name|test}}</p>
</form>

<h2>
  FormControlDirective
</h2>
<form >
  <p>绑定的标签: <input type="text" [formControl]="loginControl" /></p>
  <p>获取到的值{{loginControl.value}}</p>
</form>
